<template>
    <!--  迁入迁出城市趋势图-->
    <div class="WsyjMoveInAndOutTrend">
        <div id="WsyjMoveInAndOutTrendLineChart" class="gvChart-content"></div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from 'vue-property-decorator';
    import GVChartDataConvert from '@/util/GVChartDataConvert';
    import ZhtsStore from "@/store/wsyj/ZhtsModule/ZhtsStore";
    import {ZhtsServer} from "@/api/installServer";
    import moment from 'moment';
    import {messsageBus} from "@/util/message";

    @Component({
        name: 'WsyjMoveInAndOutTrend',
        components: {}
    })
    export default class WsyjMoveInAndOutTrend extends Vue {
        private gvChart?: any;
        private data?: object;
        private endDate?: any;
        private moveState: string = '1';
        private districtCode: string = '000000';
        private xAxisData: any = [];

        private created() {
            (messsageBus as any).$on("moveInState", (event: any) => {
                if (event) {
                    this.createGVChart();
                }
            });
        }

        @Watch('$store.state.ZhtsModule.moveInState')
        @Watch("$store.state.ZhtsModule.district.id")
        @Watch("$store.state.ZhtsModule.selectDate")
        private getMoveInstate() {
            this.moveState = ZhtsStore.state.moveInState.toString();
            this.districtCode = ZhtsStore.state.district.id;
            this.endDate = ZhtsStore.state.selectDate;
            this.createGVChart();
        }

        private createGVChart() {
            gv.config.ChartTemplate.load();
            const dom = document.getElementById('WsyjMoveInAndOutTrendLineChart');
            const migrateType = (this.moveState == '1') ? "move_in" : "move_out";
            const endDate = (this.endDate && this.endDate.length > 1) ? this.endDate : moment(new Date()).format('YYYY-MM-DD')
            const url = '/peoplemigrationindex/list';
            const params = {
                "migrateType": migrateType,
                "areaCode": this.districtCode,
                "startDate": "2020-01-01",
                "endDate": endDate
            };
            const that = this;
            ZhtsServer
                .getChartData(url, params)
                .then((result: any) => {
                    if (
                        result.data &&
                        result.status === 200
                    ) {
                        that.data = result.data;
                        const source = new gv.source.SimpleSource(
                            that.gvChartDataConvert(result.data)
                        );

                        this.gvChart = new gv.chart.AreaLineChart(source, dom);
                        this.setStyle();
                        this.gvChart.render();
                    }
                });

            // const source = new gv.source.SimpleSource(this.gvChartDataConvert(result.data ));

            // const source = new gv.source.SimpleSource(this.getData());
            // const dom = document.getElementById('WsyjMoveInAndOutTrendLineChart');
            // this.gvChart = new gv.chart.AreaLineChart(source, dom);
            // this.setStyle();
            // this.gvChart.render();
        }

        private getData() {
            const items = [];
            const name = ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07', '01/08', '01/09', '01/10',
                // '01/11', '01/12', '01/13', '01/14', '01/15', '01/16', '01/17', '01/18', '01/19', '01/20',
                // '01/21', '01/22', '01/23', '01/24', '01/25', '01/26', '01/27', '01/28', '01/29', '01/30',
                // '01/31', '02/01', '02/02', '02/03', '02/04', '02/05', '02/06', '02/07', '02/08', '02/09', '02/10',
                // '02/11', '02/12', '02/13', '02/14', '02/15', '02/16', '02/17', '02/18', '02/19', '02/20'
            ];
            for (let i = 0; i < name.length; i++) {
                if (this.moveState == '1') {
                    items.push({
                        entrys: [
                            {name: 'x', alias: '日期', value: name[i]},
                            {name: 'a', alias: '今年迁徙规模指数', value: Math.round(Math.random() * 100 / 10 + 5).toFixed(2)},
                            {name: 'b', alias: '去年迁徙规模指数', value: Math.round(Math.random() * 100 / 10 + 10).toFixed(2)},
                        ]
                    })
                } else {
                    items.push({
                        entrys: [
                            {name: 'x', alias: '日期', value: name[i]},
                            {name: 'a', alias: '今年迁徙规模指数', value: Math.round(Math.random() * 100 / 10 + 5).toFixed(2)},
                            {name: 'b', alias: '去年迁徙规模指数', value: Math.round(Math.random() * 100 / 10 + 50).toFixed(2)},
                        ]
                    })
                }
            }
            this.data = {
                items: items
            };

            return GVChartDataConvert.convert(this.data);
        }

        private setStyle() {
            // const mins = this.getMin(this.data);
            this.gvChart.config('grid', {
                // left: '10%',
                // right: '11.5%'
                height: '40%',
                bottom: 90,
            });
            this.gvChart.config('series[0].itemStyle', {
                color: '#FEE221'
            });
            this.gvChart.config('series[0].areaStyle', {
                opacity: 0.5,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {offset: 0, color: 'rgb(254,226,33)'},
                        {offset: 0.8, color: 'rgba(254,226,33,0)'},
                    ]
                },
            });
            this.gvChart.config('title', {
                text: "迁\n徙\n规\n模\n指\n数",
                left: 50,
                top: 5,
                textStyle: {
                    color: '#fff',
                    fontSize: 10
                }
            })
            this.gvChart.config('yAxis', {
                // name: "迁\n徙\n规\n模\n指\n数",
                nameGap: 15,
                nameTextStyle: {
                    color: '#fff'
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#ffffff',
                    margin: 20
                },
                axisLine: {show: false},
                // min: mins
            });
            this.gvChart.config('xAxis', [{
                    type: 'category',
                    boundaryGap: 0,
                    axisLabel: {
                        rotate: 90,
                        color: '#ffffff',
                        fontSize: 10,
                        interval: 0
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            // color: '#147582'
                            color: '#0EEBF6'
                            // color: '#A1F9F3'
                        },

                        symbol: ['none', 'arrow'],
                        symbolSize: [5, 8]
                    },
                    axisTick: {
                        show: false
                    },
                    nameTextStyle: {
                        color: '#ccc'
                    },
                },
                    {
                        type: 'category',//第二个X轴为数值轴不需要提供数据, 根据数值自适应
                        boundaryGap: 0,
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            color: '#ffffff',
                            fontSize: 10,
                            interval: 0,
                            formatter: function (value: string) {
                                return value.split("").join("\n");
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        data: this.xAxisData
                    }
                ]
            );
            this.gvChart.config('legend', {
                textStyle: {
                    color: '#ffffff'
                },
                top: 'top'
            });

            this.gvChart.config('series[0].symbolSize', 5);
            this.gvChart.config('xAxis.axisLabel.interval', 0);
            this.gvChart.config('series[1].itemStyle', {
                color: '#A1F9F3'
            });

            this.gvChart.config('series[1].areaStyle', {
                opacity: 0.5,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {offset: 0, color: 'rgb(161,249,243)'},
                        {offset: 0.8, color: 'rgba(161,249,24,0)'},
                    ]
                },
            });

            this.gvChart.config('graphic', {
                elements: [
                    {
                        type: 'text',
                        z: 100,
                        bottom: 10,
                        style: {
                            x: 90,
                            y: 0,
                            fill: "#8cfffe",
                            text: [
                                '*迁徙规模指数：反应迁入或迁出人口规模，城市间可横向对比',
                                '*城市迁徙边界采用该城市行政区划，包含该城市管辖的区、县、乡、村'
                            ].join('\n'),
                            font: '13px Microsoft YaHei'
                        },


                    }]
            });
        }

        private getMin(datas: any) {
            const arrs: any = [];
            datas.map((item: any) => {
                arrs.push(item.thisYear);
                arrs.push(item.lastYear);
            });
            return Math.min.apply(null, arrs);
        }

        private gvChartDataConvert(json: any[]) {
            this.xAxisData = [];
            const chartData = new gv.data.ChartData();
            const names = Object.keys(json[0]);

            for (let i = 0; i < json.length; i++) {
                const chartItem = new gv.data.ChartItem();

                const NameEty = new gv.data.ChartEntry();
                NameEty.name = names[0];
                const val = json[i][names[0]].substring(4)
                NameEty.value = val.slice(0, 2) + '/' + val.slice(2);
                chartItem.addEntry(NameEty);
                // 阴历日期
                this.xAxisData.push(json[i][names[1]]);

                // const valueEty1 = new gv.data.ChartEntry();
                // valueEty1.name = names[1];
                // valueEty1.value = json[i][names[1]];
                // chartItem.addEntry(valueEty1);

                const valueEty2 = new gv.data.ChartEntry();
                valueEty2.name = "今年迁徙规模指数";
                valueEty2.value = json[i][names[2]].toFixed(2);
                chartItem.addEntry(valueEty2);

                const valueEty3 = new gv.data.ChartEntry();
                valueEty3.name = "去年迁徙规模指数";
                valueEty3.value = json[i][names[3]].toFixed(2);
                chartItem.addEntry(valueEty3);

                chartData.addItem(chartItem);
            }
            return chartData;
        }
    }
</script>

<style scoped>
    .WsyjMoveInAndOutTrend {
        width: 100%;
        height: 100%;
        padding-top: 15px;
        box-sizing: border-box
    }

    .gvChart-content {
        height: 100%;
    }

</style>
